﻿@{
    ViewBag.Title = "ToggleEffect";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
	label {
		color: green;
        font-size: 20px;
	}

	#box {
        margin: 0 auto;
        border:3px double green;
        height:500px;
        width:500px;
        border-style:solid;
        background-color:lightgreen;
	}
</style>

<h2>Toggle Effect</h2>

<div id="box"></div><br /><br />
    
<button id="btnToggle">Toggle</button><br /><br />

<script type="text/javascript">
    function startFunc() {
        ZEUS.DEBUG.log("Toggle effect has started.");
    }

    function completeFunc() {
        ZEUS.DEBUG.log("Toggle effect has completed.");
    }

    $(document).ready(function () {
        $("#btnToggle").click(function () {
            var options = {
                duration: 2000,
                easing: "linear",
                start: startFunc,
                complete: completeFunc
            };

            $("#box").toggle(options);
        });
    });
</script>